/*
 * 文章列表
 * @Author: LuoQianJun
 * @Date: 2018-01-27 14:11:09
 * @Last Modified by: LuoQianJun
 * @Last Modified time: 2018-02-09 11:24:08
 */
<style lang="less" rel="stylesheet/less" type="text/less">

    .v-admin-article-index {
        .ivu-table-cell-ellipsis {
            & > div {
                word-break: keep-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }


</style>
<template>
	<div class="v-admin-article-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="articles"
			border/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';

export default {
	name: 'ArticleIndex',
	props: ['loading', 'articles', 'articleTypes'],
	data() {
		return {
			columns: [

				{
					title: '文章类别',
					key: 'article_type_id',
					align: 'center',
					render: (h, { row }) => <div> { this.getArticleType(row) || '-' } </div>,
				},

				{
					title: '文章标题',
					key: 'title',
					align: 'center',
					render: (h, { row }) => <div> { row.title || '-' } </div>,
				},

				{
					title: '文章内容',
					key: 'content',
					align: 'center',
					ellipsis: true,
					render: (h, { row }) => <div title={ this.getFilterValue(row.content) }> { this.getFilterValue(row.content) } </div>,
				},

				{
					title: '文章描述',
					key: 'description',
					align: 'center',
					ellipsis: true,
					render: (h, { row }) => <div title={ this.getFilterValue(row.description) }> { this.getFilterValue(row.description) } </div>,
				},

				{
					title: '关键字',
					key: 'keywords',
					align: 'center',
					ellipsis: true,
					render: (h, { row }) => <div title={ row.keywords }> { row.keywords || '-' } </div>,
				},

				{
					title: '案例图',
					key: 'thumb',
					align: 'center',
					render: (h, { row }) => <div> { row.thumb
						? <img src={ row.thumb } alt="无" width="50%" height="50%"/>
						: '无' } </div>,
				},

				// {
				//     title: '导航图',
				//     key: 'banner',
				//     align: 'center',
				//     render: (h,{row}) => {
				//         return <div> { row.banner
				//                         ? <img src={ row.banner} alt="无" width="50%" height="50%"/>
				//                         : '无' } </div>
				//     }
				// },

				// {
				//     title: '轮播图',
				//     key: 'carousel_figure',
				//     align: 'center',
				//     render: (h,{row}) => {
				//         return <div> { row.carousel_figure
				//                         ? <img src={ row.carousel_figure} alt="无" width="50%" height="50%"/>
				//                         : '无' } </div>
				//     }
				// },

				// {
				//     title: '公司缩略图',
				//     key: 'company_thumb',
				//     align: 'center',
				//     render: (h,{row}) => {
				//         return <div> { row.company_thumb
				//                         ? <img src={ row.company_thumb} alt="无" width="50%" height="50%"/>
				//                         : '无' } </div>
				//     }
				// },

				{
					title: '优先级',
					key: 'sort',
					align: 'center',
					render: (h, { row }) => <div> { row.sort || 0 } </div>,
				},

				{
					title: '操作',
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row.id); }} type="primary">编辑文章</Button>
							<Button size="small" on-click={() => { this.$emit('delete', row.id); }} type="error">删除文章</Button>
						</div>),
				},
			],
		};
	},
	methods: {

		getArticleType(record) {
			for (const key in this.articleTypes) {
				if (parseInt(record.article_type_id) === parseInt(key)) {
					return this.articleTypes[key];
				}
			}

			return '-';
		},

		/**
         * 获取去除HTML标签后的文本
         * @param  {string} value {传入的值}
         * @return {undefined}
         */
		getFilterValue(value) {
			if (!value) return '-';

			return value.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, '');
		},
	},
};
</script>
